<template>
  <el-card style="margin-top: 20px;">
    <template #header>
      <div class="card-header">
        <span class="title">告警记录详情</span>
      </div>
    </template>

    <CustomTable 
      :tableData="tableData"
      :columns="tableColumns"
      v-loading="loading"
    >
      <el-table-column label="操作" fixed="right" align="center" width="100">
        <template #default="{row}">
          <el-button link type="primary" @click="openDialog(row)">查看详情</el-button>
        </template>
      </el-table-column>
    </CustomTable>

    <Pagination 
      v-model:pageNum="pageInfo.pageNum"
      v-model:pageSize="pageInfo.pageSize"
      :total="total"
      :callback="() => {}"
    />
    
    <!-- 添加弹框组件 -->
    <el-dialog
      v-model="dialogVisible"
      title="告警指标详情"
      :close-on-click-modal="false"
      destroy-on-close
      draggable
      :fullscreen="fullscreen"
      width="70%"
    >
      
      <Detail :alertId="alertId" />
      
      <template #footer>
        <el-button @click="isFullscreen">全屏</el-button>
        <el-button @click="dialogVisible = false">关闭</el-button>
      </template>
    </el-dialog>
  </el-card>
</template>

<script setup>
import { ref, watch, h } from 'vue'
import { getNoRepeatList } from '@/api/MonitorIndex/CustomerAlert'
import { useTable } from '@/hooks'
import { indexTypeList, indexSourceList, jysList } from '@/utils/catalogue'
import { formatDateTimeWithMs } from '@/utils/tools'
import Detail from './__Detail__.vue'

const props = defineProps({
  noRepeatId: String,
})
const fullscreen = ref(false)
const { tableData, pageInfo, total, loading, methods } = useTable({
  getDataApi: () => getNoRepeatList({
    ...pageInfo,
    noRepeatId: props.noRepeatId
  }),
})
const isFullscreen = () => {
  fullscreen.value = !fullscreen.value
}
const alertId = ref(0)
const openDialog = (row) => {
  alertId.value = row.alertId
  dialogVisible.value = true
}

const dialogVisible = ref(false)
const dialogContent = ref([])
const tableColumns = ref([
  { label: '序号', type: 'index', width: 60 },
  { label: '营业部名称', prop: 'yybName', width: 200, align:'left' },
  { label: '客户号', prop: 'khh', width: 120 },
  { label: '客户姓名', prop: 'khxm', width: 200 },
  { 
    label: '交易所', prop: 'jys', width: 100, 
    render: ({row}) => {
      if(row.jys === 'BJ') return '北交所'
      if(row.jys === 'SZ') return '深交所'
      if(row.jys === 'SH') return '上交所'
      return ''
    }  
  },
  { 
    label: '指标来源', prop: 'indexSource', width: 100,
    render: ({row}) => {
      const indexSource = indexSourceList.find(item => item.value === row.indexSource)
      if(indexSource) return indexSource.label
      return ''
    }  
  },
  { label: '指标名称', prop: 'indexName', width: 200 },
  { label: '告警等级', prop: 'alertLevel', width: 100, render: ({row}) => row.alertLevel ? `等级${row.alertLevel}` : '' },
  { label: '告警时间', prop: 'alertTime', width: 200, render: ({row}) => row.alertTime ? formatDateTimeWithMs(row.alertTime) : '' },
  { label: '重点客户组名称', prop: 'groupName', width: 200, align: 'left' },
])

// 显示详情弹框
const showDetailDialog = ({warningFlowList}) => {
  dialogContent.value = formatterText({warningFlowList})
  dialogVisible.value = true
}

const formatterText = ({warningFlowList}) => {

  let html = ''

  for(let key in warningFlowList){
    // 使用 HTML strong 标签加粗 key
    html += `<strong style="font-weight: bold;">${key}</strong>：<br/>`
    warningFlowList[key].forEach(item => {
      html += '&emsp;&emsp;' + item + '<br/>'
    })
  }

  return html
}

watch(() => props.noRepeatId, (newVal) => {
  if (newVal) {
    methods.getList()
  } else {
    tableData.value = []
  }
}, { immediate: true })
</script>

<style lang="less" scoped>
:deep(.el-table .cell) {
  white-space: pre-wrap;
  // max-height: 70px;
  overflow: auto;
}

/* 为弹框内容添加滚动条 */
:deep(.el-dialog__body) {
  max-height: 85vh;
  overflow-y: auto;
}

:deep(.el-divider--horizontal) {
  margin: 12px 0;
}
</style>